<template>
  <div class="can">
    <!-- 使用vue插件制造背景效果 -->
    <vue-particles
      class="login-background"
      color="#97D0F2"
      :particleOpacity="0.7"
      :particlesNumber="50"
      shapeType="circle"
      :particleSize="4"
      linesColor="#97D0F2"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
    >
      >
    </vue-particles>

    <!-- 登录框 -->

    <div class="content">
      <h3 class="h3">登录</h3>
      <div class="login">
        <div class="login-item">
          <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            status-icon
            :rules="rules"
            label-width="70px"
            class="demo-ruleForm"
          >
            <el-form-item label="用户名" prop="username">
              <el-input
                v-model="ruleForm.username"
                type="text"
                autocomplete="off"
              />
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
                v-model="ruleForm.password"
                type="password"
                autocomplete="off"
              />
            </el-form-item>

            <el-form-item label="验证码" prop="yzm">
              <el-input
                class="inp"
                v-model="ruleForm.yzm"
                type="text"
                autocomplete="off"
              />
              <div>
                <canvas id="canvas" @click="getCanvas()"></canvas>
              </div>
            </el-form-item>

            <div class="btn">
              <el-button type="primary" @click="submitForm(ruleFormRef)"
                >登录</el-button
              >
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script  setup>
import { reactive, ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { debounce } from "@/utils/debounce";

const ruleFormRef = ref();
// 路由
const router = useRouter();

const validUser = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("Please input the user"));
  } else {
    callback();
  }
};
const validPwd = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("Please input the password "));
  } else {
    callback();
  }
};

const getCanvas = () => {
  const numArr = ["mercurio13zeq", "canvas", "9527", "11数字33", "d字母f"];
  const index = Math.floor(Math.random() * 5);
  const num = numArr[index];
  draw(num);
};
// 随机颜色
const randomColor = () => {
  let r = Math.floor(Math.random() * 256);
  let g = Math.floor(Math.random() * 256);
  let b = Math.floor(Math.random() * 256);
  return "rgb(" + r + "," + g + "," + b + ")";
};
const draw = (str) => {
  let canvas_width = 120;
  let canvas_height = 50;
  let canvas = document.getElementById("canvas"); //获取到canvas的对象，演员
  // console.log(canvas)
  let context = canvas.getContext("2d"); //获取到canvas画图的环境，演员表演的舞台
  // console.log(context)
  canvas.width = canvas_width;
  canvas.height = canvas_height;
  context.fillStyle = "#cccccc";
  context.fillRect(0, 0, 300, 200);
  let sCode = str;
  // 	"A,B,C,D,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,U,V,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
  // let aCode = sCode.split(",");
  let aLength = sCode.length; //获取到数组的长度

  for (let i = 0; i < aLength; i++) {
    // let j = Math.floor(Math.random() * aLength); //获取到随机的索引值
    let deg = (Math.random() * 15 * Math.PI) / 180; //产生0~30之间的随机弧度
    let txt = sCode[i]; //得到随机的一个内容
    // num[i] = txt;

    let x = 10 + i * 30; //文字在canvas上的x坐标
    let y = 30 + Math.random() * 8; //文字在canvas上的y坐标
    context.font = "bold 23px 微软雅黑";
    context.translate(x, y);
    context.rotate(deg);
    context.fillStyle = randomColor();
    context.fillText(txt, 0, 0);
    context.rotate(-deg);
    context.translate(-x, -y);
  }
  for (let i = 0; i <= 5; i++) {
    //验证码上显示线条
    context.strokeStyle = randomColor();
    context.beginPath();
    context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
    context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
    context.stroke();
  }
  for (let i = 0; i <= 30; i++) {
    //验证码上显示小点
    context.strokeStyle = randomColor();
    context.beginPath();
    let x = Math.random() * canvas_width;
    let y = Math.random() * canvas_height;
    context.moveTo(x, y);
    context.lineTo(x + 1, y + 1);
    context.stroke();
  }
  // this.number = this.num.join().replace(/,/g, "");
};

onMounted(() => {
  draw("9527");
});

const ruleForm = reactive({
  username: "",
  password: "",
  yzm: "",
});

const rules = reactive({
  username: [{ validator: validUser, trigger: "blur" }],
  password: [{ validator: validPwd, trigger: "blur" }],
  yzm: [{ validator: validPwd, trigger: "blur" }],
});

const submitForm = debounce((formEl) => {
  console.log(formEl);
  if (!formEl) return;
  formEl.validate((valid) => {
    console.log(valid);
    if (valid) {
      console.log("submit!");
      window.sessionStorage.setItem("token", "lvke");
      router.push("/index/home");
    } else {
      console.log("error submit!");
      return false;
    }
  });
}, 2000);
</script>

<style scoped>
.content {
  width: 400px;
  height: 300px;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto; /* 有了这个就自动居中了 */
  background: white;
}
.can {
  width: 100%;
  height: 100%;
  color: #cccccc;
}

.login-background {
  /* background: linear-gradient(-180deg, #4754e4 0%, #4c4c4c 100%); */
  width: 100%;
  height: 100%; /**宽高100%是为了图片铺满屏幕 */
  z-index: -1;
  position: absolute;
  overflow-y: hidden;

  background: url("https://img1.baidu.com/it/u=3007048469,3759326707&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1680886800&t=21900bf447fe958cea3322705ffa8d80")
    no-repeat;
  background-size: 100% 100%;
}

.h3 {
  text-align: center;
  line-height: 50px;
  color: black;
}
.login {
  width: 100%;
  height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-item {
  width: 90%;
  height: 90%;
}

.inp {
  width: 50%;
}
.btn {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-button--primary {
  width: 220px;
}
canvas {
  display: block;
  width: 120px;
  height: 32px;
}
.el-form-item__content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex: 1;
  line-height: 32px;
  position: relative;
  font-size: var(--font-size);
  min-width: 0;
  justify-content: space-between;
}
</style>